
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <style>
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="./core/event.js"></script>
  <script src="./core/json2.js"></script>
  <script src="./core/comet.js"></script>
  
<script>


try{

function setCookie(name, value, expires, path, domain, secure) {
  if (!name || !value) return false;
  var str = name + '=' + encodeURIComponent(value);
  
  if (expires) str += '; expires=' + expires.toGMTString();
  if (path)    str += '; path=' + path;
  if (domain)  str += '; domain=' + domain;
  if (secure)  str += '; secure';
  
  document.cookie = str;
  return true;
}

function getCookie(name) {
  var pattern = "(?:; )?" + name + "=([^;]*);?";
  var regexp  = new RegExp(pattern);
  
  if (regexp.test(document.cookie))
  return decodeURIComponent(RegExp["$1"]);
  
  return false;
}

function deleteCookie(name, path, domain) {
  setCookie(name, null, new Date(0), path, domain);
  return true;
}

var user = getCookie('user');

if ( !user && window.location.hash.length == 0 )
{
  window.location='https://www.facebook.com/dialog/oauth?client_id=369074116454755&redirect_uri='+window.location+'&response_type=token&scope=user_about_me,friends_about_me';
}
else
{
  access_token= window.location.hash.substring(1);
}
  

// http://comet2.lovesupport.ru/html/faceonline/index.html#access_token=AAAFPq8ObaWMBAOIzDFbUk1oDRAHdqQzt81E5oQf4SDfssbXjIXQqg2J2gVFWq56ZBYSytzByYvQpkRYvPLYFl9HoPWFsrXgtelJJJv9En1Bqfb7bw&expires_in=6216
}catch(e)
{
  alert(e.message);
}

//alert("1");  


function queryFacebook(target, callback)
{
  var path = "https://graph.facebook.com/";
  path+="/"+target;
  path+="?"+access_token+"&callback="+callback;
  var script = document.createElement('script');
  script.src = path;
  document.body.appendChild(script);        
}




model = {};
model.friends = {};


function OneFriendController(id)
{
  this.subscribers = [];
  this.id = id;
  
  this.subscribe = function ( target )
  {
    this.subscribers.push( target );
    target.update();
  }

  this.fire = function ()
  {
    for (var i = 0; i < this.subscribers.length; i++)
        this.subscribers[i].update( this.id );
  }

  this.loaded = function(user)
  {
    for ( var prop in user ) if ( user.hasOwnProperty(prop) ) 
    {
      // this.subscr_by_id[contr].load();
      model.friends[this.id][prop] = user[prop];
    }

    this.fire();
  }

  this.pictureLoaded = function(src)
  {
    model.friends[this.id].picture = src;
    this.fire();
  }

  this.load = function()
  {
    var controller = "window.friendsController.subscr_by_id[" + this.id + "]";
    var target = this.id;
    var callback = controller + ".loaded";
    queryFacebook(target, callback);

    var target = this.id+"/picture";
    var callback = controller + ".pictureLoaded";
    queryFacebook(target, callback);
  }
}


function FriendsController()
{
  window.friendsController = this;
  /* Подписчики списка */
  this.subscribers = [];
  /* Подписчики на конкретный friend */
  this.subscr_by_id = {};

  this.subscribe = function ( target, id)
  {
    
    if ( id ) 
    {
      if ( !this.subscr_by_id[id] )
        this.subscr_by_id[id] = new OneFriendController(id);
      //this.subscr_by_id[id].push(target);
      this.subscr_by_id[id].subscribe(target);
      /*if ( model.friends[id] )
        target.update();
      */
    }
    else
    {
      this.subscribers.push( target );
      target.update();
    }
  }

  this.debscribe = function ( target, id)
  {
    alert("TODO");
  }

  this.fire = function (/*id*/)
  {
    for (var i = 0; i < this.subscribers.length; i++)
        this.subscribers[i].update();
    /*
    var uplist = null;
    if ( !id )
      uplist = this.subscribers;
    else
      uplist = this.subscr_by_id[id];
  
    alert("this.fire " + uplist.length);
    for (var i = 0; i < uplist.length; i++)
        uplist[i].update();
    */
  }

  this.friendsLoaded = function ( friends )
  {
    
    var data = friends.data;
    
    for ( var i = 0; i < data.length; i++)
      model.friends[ data[i].id ] = data[i];
    this.fire();


    for ( var contr in this.subscr_by_id ) if ( this.subscr_by_id.hasOwnProperty(contr) ) 
    {
      this.subscr_by_id[contr].load();
    }


  }

  this.loadAllFriends = function()
  {
    
    queryFacebook("me/friends", "window.friendsController.friendsLoaded");
  }

};


function FriendView(parent, id, controller)
{
  this.id = id;
  this.controller = controller;

  this.node = document.createElement("div");
  this.node.setAttribute("class", "friend-view");
  this.node.setAttribute("id", id);
  parent.node.appendChild(this.node);
  this.parent = parent;


  this.dispose = function()
  {
    this.controller.debscribe(this, this.id);
    this.parent.removeChild( this.node );
  }

  this.setName = function(user)
  {
    if ( !this.node.userName )
    {
      var userName = document.createElement("div");
      userName.setAttribute("id", "user-name-" + this.id);
      userName.setAttribute("class", "user-name");
      this.node.userName = userName;
      this.node.appendChild(userName);
    }

    if (user.name)
    {
      var innerHTML = "<a href='#' id='instant-chat-"+user.id+"' >" + user.name + "</a>";
      innerHTML += "<a href='#' id='instant-chat-"+user.id+"-r' > R </a>";
      if (user.link)
         innerHTML += " <a href='"+user.link+"' target='_blank'> --&gt; </a>";
      this.node.userName.innerHTML = innerHTML;

      var a = document.getElementById("instant-chat-"+user.id);
      var ar = document.getElementById("instant-chat-"+user.id+"-r");
      Event.add(a, 'click', function(){ document.getElementById("instant-chat").contentWindow.location = "instant-chat.html?id="+user.id; });
      Event.add(ar, 'click', function()
        { 
          var params = "menubar=no,location=no,resizable=no,scrollbars=no,status=no,height=640,width=480";
          // window.open("http://comet2.lovesupport.ru/html/faceonline/index.html", "faceonline", params);
          window.reverse_chat = window.open("http://comet2.lovesupport.ru/html/faceonline/instant-chat.html?r1&id="+user.id, params); 

        } 
      );
      
      //this.node.userName.innerHTML = user.name + ": " + user.bio;
      //this.node.userName.appendChild( document.createTextNode(name) );
    }
  }

  this.setBio = function(user)
  {
    if ( !this.node.bio )
    {
      var bio = document.createElement("div");
      bio.setAttribute("id", "user-bio-" + this.id);
      bio.setAttribute("class", "user-bio");
      this.node.bio = bio;
      this.node.appendChild(bio);
    }

    if (user.bio)
    {
      this.node.bio.innerHTML = user.bio;
      //this.node.userName.innerHTML = user.name + ": " + user.bio;
      //this.node.userName.appendChild( document.createTextNode(name) );
    }
  }

  this.setPicture = function(user)
  {
    if ( !this.node.picture )
    {
      var picDiv = document.createElement("div");
      picDiv.setAttribute("id", "picture-" + this.id);
      picDiv.setAttribute("class", "picture");
      this.node.picture = picDiv;
      this.node.appendChild(picDiv);
    }

    if ( !user.picture)
      return;

    if ( !this.node.picture.image )
    {
      var img = document.createElement("img");
      // img.setAttribute("src", user.picture);
      this.node.picture.image = img;
      this.node.picture.appendChild(img);
    }
    
    this.node.picture.image.setAttribute("src", user.picture);
    //this.node.picture.appendChild( document.createTextNode(user.bio) );
  }

  this.update = function()
  {
    var user = model.friends[this.id];
    this.setName(user/*.name*/)
    this.setPicture(user/*.picture*/);
    this.setBio(user);
  }

  if ( this.controller )
    this.controller.subscribe(this, id);

};

function FriendListView(parent, controller)
{
  this.controller = controller;
  this.node = document.createElement("div");
  this.node.setAttribute("class", "friend-list-view");
  this.node.setAttribute("id", "friend-list-view");
  parent.node.appendChild(this.node);
  this.parent = parent;
  this.friendView={};

  this.update = function()
  {
    
    var friends = model.friends;
    for(friend in friends)
    {
      if (!this.friendView.hasOwnProperty(friend)) {
        //alert("new friend")
        try{
        this.friendView[friend] = new FriendView(this, friend, controller);
        }
        catch(e)
        {
           alert(e.message);
           return;
        }
        //alert("new friend ready")
      }
    }
  }
  
  if ( this.controller )
    this.controller.subscribe(this);
}

function Friend(id, name)
{
  this.id = id;
  this.name = name;
  
  this.set = function ( user )
  {
    // alert(user.name);
    document.body.appendChild( document.createElement("br") );
    document.body.appendChild( document.createTextNode(user.name) );
    
  }
};


function UserFriends(friends_result)
{
  
  var data = friends_result.data;
  var paging = friends_result.paging;

  //alert(data)
  friends = {};
  for ( var i = 0; i < data.length; i++)
  {
    friends[ data[i].id ] = new Friend(data[i].id, data[i].name);
    queryFacebook(data[i].id, "friends["+data[i].id+"].set");
    // alert(data[i].name);
    //break;
  }
}

function UserPicture(picture) 
{
  model.user.picture = picture;
  /*var img = document.createElement("img");
  img.setAttribute("src", picture);
  document.body.appendChild(img);
  */
}

function UserInfo(user) 
{
  // document.body.appendChild( document.createTextNode(user.name) );
  model.user = user;
  queryFacebook("me/picture", "UserPicture");
  //queryFacebook("me/friends", "UserFriends");
}


function OnLoad()
{
  //alert( "localStorage: " + localStorage );
  if (access_token)
  {
    try
    {
      window.comet = new Comet(-1, "test");
      window.comet.create();
      queryFacebook("me", "UserInfo");
      new FriendsController();
      var node = document.getElementById("friends");
      node.node = node;
      window.friendListView = new FriendListView( node, window.friendsController );
      window.friendsController.loadAllFriends();
      
    }
    catch(e)
    {
      alert(e.message);
    }
  }
}

Event.add(window, 'load', OnLoad)

</script>


<body>
<h1>Добро Пожаловать!</h1>

<div id="main">
  <iframe id="instant-chat" > </iframe>

  <div id="friends">
  </div>

</div>

<script>
  /*
   displayUser("https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/275641_1259873181_220911934_q.jpg");
    displayUser({
   "id": "1259873181",
   "name": "Vladimir Migashko",
   "first_name": "Vladimir",
   "last_name": "Migashko",
   "link": "http://www.facebook.com/profile.php?id=1259873181",
   "bio": "\u041f\u043e\u043a\u0435\u0440, \u0432\u0438\u0441\u043a\u0438, \u0441\u0438\u0433\u0430\u0440\u044b, \u0441++",
   "quotes": "\u042f \u043d\u0435 \u0438\u0437 \u0442\u0435\u0445 \u043a\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0434\u0443\u043c\u0430\u0435\u0442, \u0438\u0431\u043e \u044f \u043d\u0435 \u0434\u0443\u043c\u0430\u044e... \u0430 \u0427\u0410\u0419 \u043f\u0438\u0442\u044c - \u043d\u0435 \u0434\u0440\u043e\u0432\u0430 \u0440\u0443\u0431\u0438\u0442\u044c, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u043c\u043e\u0432\u0430\u0440; \u0432 \u0441\u0430\u043c\u043e\u0432\u0430\u0440, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043d\u0443\u0436\u0435\u043d \u0443\u0433\u043e\u043b\u044c, \u0430 \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u0443\u043b\u044c \u0441\u0430\u043c\u043e\u0432\u0430\u0440\u043d\u043e\u0433\u043e \u0443\u0433\u043b\u044f - \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u043a\u043b\u0430\u0434\u0430\u0445 \u0442\u043e\u043f\u043b\u0438\u0432\u0430 \u0420\u0430\u0446\u0435\u0440, \u043d\u0430 \u0411\u043e\u043b. \u041e\u0440\u0434\u044b\u043d\u043a\u0435, \u0438\u043b\u0438 \u0443 \u041c\u044f\u0441\u043d\u0438\u0446\u043a\u0438\u0445 \u0412\u043e\u0440\u043e\u0442.",
   "work": [
      {
         "employer": {
            "id": "207151212636731",
            "name": "Mamba - Dating Service"
         },
         "start_date": "2006-08"
      }
   ],
   "gender": "male",
   "timezone": 4,
   "locale": "ru_RU",
   "verified": true,
   "updated_time": "2011-12-14T20:31:44+0000"
});
   */
</script>
</body>
</HTML>


<!-- 
<script src="./core/event.js"></script>
  <script src="./core/json2.js"></script>
  <script src="./core/comet.js"></script>
-->

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
   <head> 
     <title>Client Flow Example</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head> 
   <body> 
   <script> 
     function displayUser(user) {
       var userName = document.getElementById('userName');
       var greetingText = document.createTextNode('Greetings, '
         + user.name + '.');
   userName.appendChild(greetingText);
     }

     var appID = "369074116454755";
     if (window.location.hash.length == 0) {
       var path = 'https://www.facebook.com/dialog/oauth?';
   var queryParams = ['client_id=' + appID,
     'redirect_uri=' + window.location,
     'response_type=token'];
   var query = queryParams.join('&');
   var url = path + query;
   window.open(url);
     } else {
       var accessToken = window.location.hash.substring(1);
       var path = "https://graph.facebook.com/me?";
   var queryParams = [accessToken, 'callback=displayUser'];
   var query = queryParams.join('&');
   var url = path + query;
   // use jsonp to call the graph
       var script = document.createElement('script');
       script.src = url;
       document.body.appendChild(script);        
     }
   </script> 
   <p id="userName"></p> 
   Привет!!!!!      
   </body> 
  </html>
  
-->